<template>
  <view class="questionnaire-box">
    <PageTitle class="boxTitle" text="安全用气调查问卷"></PageTitle>

    <!-- 问卷说明 -->
    <view class="instructions con-box">
      <p class="p" style="font-size: 14px;">尊敬的用户：</p>
      <p class="p" style="font-size: 14px;">衷心感谢您选择使用我公司的管道燃气服务。为保障您家中用气环境的安全合规，避免因不符合标准导致多次上门仍无法顺利开气，烦请您配合完成以下安全用气调查问卷，感谢您的理解与支持：</p>
    </view>

    <!-- 问题区域 -->
    <view class="questions con-box">
      <!-- 问题1 -->
      <view class="question-item" v-if="currentQuestion === 1">
        <view class="question-number">1、</view>
        <view class="question-content">
          <p class="question-text">根据《家用燃气燃烧器具安装及验收规程》（CJJ12-2013）4.2.4 条规定：橱柜通气孔总面积需按灶具热负荷计算（10cm²/kW），且不得小于 80cm²，以此保障燃烧所需空气供应及泄漏燃气的有效排出。请问您家中嵌入式灶灶台下方的橱柜是否已开设符合要求的通气孔？</p>

          <view class="example-image" v-if="currentQuestion === 1">
            <p class="example-text">开孔示例图：</p>
            <image src="@/static/image/开孔示意图.png" mode="widthFix" class="example-img"></image>
          </view>

          <view class="options">
            <label class="option" @click="selectAnswer(1, true)">
              <view class="radio" :class="{ selected: answers[0] === true }"></view>
              <text>是</text>
            </label>
            <label class="option" @click="selectAnswer(1, false)">
              <view class="radio" :class="{ selected: answers[0] === false }"></view>
              <text>否</text>
            </label>
          </view>

          <button class="next-btn" @click="goToNextQuestion" :disabled="answers[0] === null">下一题</button>
        </view>
      </view>

      <!-- 问题2 -->
      <view class="question-item" v-if="currentQuestion === 2">
        <view class="question-number">2、</view>
        <view class="question-content">
          <p class="question-text">依据《燃气工程项目规范》（GB55009-2021）6.3.1 条及《家用燃气燃烧器具安装及验收规程》（CJJ12-2013）4.3.10 条、4.3.11 条规定：热水器烟气必须排至室外，排烟管材质应为金属（禁止使用软烟道），且烟道与热水器的水平段长度不得超过 2 米；排烟口伸出室外后，与门、窗等开口的水平距离需≥0.6米，若垂直向上伸出，高度需≥0.3米。请问您家中热水器是否符合上述要求？</p>

          <view class="example-image" v-if="currentQuestion === 2">
            <p class="example-text">烟道示例图：</p>
            <image src="@/static/image/烟道示例图.png" mode="widthFix" class="example-img"></image>
          </view>

          <view class="options">
            <label class="option" @click="selectAnswer(2, true)">
              <view class="radio" :class="{ selected: answers[1] === true }"></view>
              <text>是</text>
            </label>
            <label class="option" @click="selectAnswer(2, false)">
              <view class="radio" :class="{ selected: answers[1] === false }"></view>
              <text>否</text>
            </label>
          </view>

          <view class="btn-group">
            <button class="prev-btn" @click="goToPrevQuestion">上一题</button>
            <button class="next-btn" @click="goToNextQuestion" :disabled="answers[1] === null">下一题</button>
          </view>
        </view>
      </view>

      <!-- 问题3 -->
      <view class="question-item" v-if="currentQuestion === 3">
        <view class="question-number">3、</view>
        <view class="question-content">
          <p class="question-text">按照《燃气工程项目规范》（GB55009-2021）6.1.3 条强制规定：燃具及管道不得设置在卫生间、卧室、客房等房间。请问您家中卫生间内是否安装了燃气管道设施及燃器具？</p>

          <view class="options">
            <label class="option" @click="selectAnswer(3, true)">
              <view class="radio" :class="{ selected: answers[2] === true }"></view>
              <text>是</text>
            </label>
            <label class="option" @click="selectAnswer(3, false)">
              <view class="radio" :class="{ selected: answers[2] === false }"></view>
              <text>否</text>
            </label>
          </view>

          <view class="btn-group">
            <button class="prev-btn" @click="goToPrevQuestion">上一题</button>
            <button class="next-btn" @click="goToNextQuestion" :disabled="answers[2] === null">下一题</button>
          </view>
        </view>
      </view>

      <!-- 问题4 -->
      <view class="question-item" v-if="currentQuestion === 4">
        <view class="question-number">4、</view>
        <view class="question-content">
          <p class="question-text">依据《燃气工程项目规范》（GB55009-2021）6.1.7 条规定：禁止封闭燃气表及表前管道，禁止管道穿越 "卫生间、洗衣槽、涮洗盆" 等积水区域。请问您家中气表及表前的燃气管道设施是否处于封闭状态？燃气管道是否有穿越洗衣槽、涮洗盆等情况？</p>

          <view class="options">
            <label class="option" @click="selectAnswer(4, true)">
              <view class="radio" :class="{ selected: answers[3] === true }"></view>
              <text>是</text>
            </label>
            <label class="option" @click="selectAnswer(4, false)">
              <view class="radio" :class="{ selected: answers[3] === false }"></view>
              <text>否</text>
            </label>
          </view>

          <view class="btn-group">
            <button class="prev-btn" @click="goToPrevQuestion">上一题</button>
            <button class="next-btn" @click="goToNextQuestion" :disabled="answers[3] === null">下一题</button>
          </view>
        </view>
      </view>

      <!-- 问题5 -->
      <view class="question-item" v-if="currentQuestion === 5">
        <view class="question-number">5、</view>
        <view class="question-content">
          <p class="question-text">根据《燃气工程项目规范》（GB55009-2021）6.1.2 条、6.1.5 条要求：家庭用户需强制使用金属软管（如不锈钢波纹管），且必须安装自闭阀（具备超压 / 欠压自动切断功能）。请问您家中燃气灶下是否连接了不锈钢波纹管，并安装了自闭阀？</p>

          <view class="example-image" v-if="currentQuestion === 5">
            <p class="example-text">灶下波纹管及自闭阀示例图：</p>
            <image src="@/static/image/灶下波纹管及自闭阀示例图.png" mode="widthFix" class="example-img"></image>
          </view>

          <view class="options">
            <label class="option" @click="selectAnswer(5, true)">
              <view class="radio" :class="{ selected: answers[4] === true }"></view>
              <text>是</text>
            </label>
            <label class="option" @click="selectAnswer(5, false)">
              <view class="radio" :class="{ selected: answers[4] === false }"></view>
              <text>否</text>
            </label>
          </view>

          <view class="btn-group">
            <button class="prev-btn" @click="goToPrevQuestion">上一题</button>
            <button class="next-btn" @click="goToNextQuestion" :disabled="answers[4] === null">下一题</button>
          </view>
        </view>
      </view>

      <!-- 问题6 -->
      <view class="question-item" v-if="currentQuestion === 6">
        <view class="question-number">6、</view>
        <view class="question-content">
          <p class="question-text">依据《燃气工程项目规范》（GB55009-2021）6.1.2 条规定：所有家用燃具必须配备熄火保护装置，以防止意外熄火后发生燃气泄漏。请问您家中的燃气灶具是否装有熄火保护装置？</p>

          <view class="options">
            <label class="option" @click="selectAnswer(6, true)">
              <view class="radio" :class="{ selected: answers[5] === true }"></view>
              <text>是</text>
            </label>
            <label class="option" @click="selectAnswer(6, false)">
              <view class="radio" :class="{ selected: answers[5] === false }"></view>
              <text>否</text>
            </label>
          </view>

          <view class="btn-group">
            <button class="prev-btn" @click="goToPrevQuestion">上一题</button>
            <button class="next-btn" @click="goToNextQuestion" :disabled="answers[5] === null">下一题</button>
          </view>
        </view>
      </view>

      <!-- 问题7 -->
      <view class="question-item" v-if="currentQuestion === 7">
        <view class="question-number">7、</view>
        <view class="question-content">
          <p class="question-text">按照《家用燃气燃烧器具安装及验收规程》（CJJ12-2013）4.3.3 条要求：立管支架需固定牢靠，不得拆除或破坏，以确保管道稳定性，防止接口松动泄漏。请问您家中的立管支架是否保持原样固定，未被拆除或破坏？</p>

          <view class="example-image" v-if="currentQuestion === 7">
            <p class="example-text">立管支架示例图：</p>
            <image src="@/static/image/立管支架示例图.png" mode="widthFix" class="example-img"></image>
          </view>

          <view class="options">
            <label class="option" @click="selectAnswer(7, true)">
              <view class="radio" :class="{ selected: answers[6] === true }"></view>
              <text>是</text>
            </label>
            <label class="option" @click="selectAnswer(7, false)">
              <view class="radio" :class="{ selected: answers[6] === false }"></view>
              <text>否</text>
            </label>
          </view>

          <view class="btn-group">
            <button class="prev-btn" @click="goToPrevQuestion">上一题</button>
            <button class="next-btn" @click="determineNextQuestion" :disabled="answers[6] === null">下一题</button>
          </view>
        </view>
      </view>

      <!-- 开放式厨房说明 -->
      <view class="question-item" v-if="currentQuestion === 7.5">
        <view class="question-content">
          <p class="question-text">根据《城镇燃气技术规范》（GB50494-2009）8.2.2 条规定：开放式厨房需采取"强化通风与报警措施"，以弥补空间连通带来的安全隐患。若您家中为开放式厨房，请继续回答以下问题：</p>

          <button class="next-btn" @click="confirmOpenKitchen(true)">我家是开放式厨房，继续答题</button>
          <button class="skip-btn" @click="confirmOpenKitchen(false)">我家不是开放式厨房，完成问卷</button>
        </view>
      </view>

      <!-- 问题8 -->
      <view class="question-item" v-if="currentQuestion === 8">
        <view class="question-number">8、</view>
        <view class="question-content">
          <p class="question-text">是否设置带有自动熄火保护装置的燃气灶具、平衡式热水器。</p>

          <view class="options">
            <label class="option" @click="selectAnswer(8, true)">
              <view class="radio" :class="{ selected: answers[7] === true }"></view>
              <text>是</text>
            </label>
            <label class="option" @click="selectAnswer(8, false)">
              <view class="radio" :class="{ selected: answers[7] === false }"></view>
              <text>否</text>
            </label>
          </view>

          <view class="btn-group">
            <button class="prev-btn" @click="goToPrevQuestion">上一题</button>
            <button class="next-btn" @click="goToNextQuestion" :disabled="answers[7] === null">下一题</button>
          </view>
        </view>
      </view>

      <!-- 问题9 -->
      <view class="question-item" v-if="currentQuestion === 9">
        <view class="question-number">9、</view>
        <view class="question-content">
          <p class="question-text">热水器是否安装在户外独立空间，如生活阳台、庭院中。</p>

          <view class="options">
            <label class="option" @click="selectAnswer(9, true)">
              <view class="radio" :class="{ selected: answers[8] === true }"></view>
              <text>是</text>
            </label>
            <label class="option" @click="selectAnswer(9, false)">
              <view class="radio" :class="{ selected: answers[8] === false }"></view>
              <text>否</text>
            </label>
          </view>

          <view class="btn-group">
            <button class="prev-btn" @click="goToPrevQuestion">上一题</button>
            <button class="next-btn" @click="goToNextQuestion" :disabled="answers[8] === null">下一题</button>
          </view>
        </view>
      </view>

      <!-- 问题10 -->
      <view class="question-item" v-if="currentQuestion === 10">
        <view class="question-number">10、</view>
        <view class="question-content">
          <p class="question-text">是否设置了可探测甲烷和一氧化碳的复合型燃气泄漏报警器及自动切断阀，且报警器与自动切断阀处于连锁状态？</p>

          <view class="example-image" v-if="currentQuestion === 10">
            <p class="example-text">复合式报警器示例图：</p>
            <image src="@/static/image/复合式报警器示例图.png" mode="widthFix" class="example-img"></image>
          </view>

          <view class="options">
            <label class="option" @click="selectAnswer(10, true)">
              <view class="radio" :class="{ selected: answers[9] === true }"></view>
              <text>是</text>
            </label>
            <label class="option" @click="selectAnswer(10, false)">
              <view class="radio" :class="{ selected: answers[9] === false }"></view>
              <text>否</text>
            </label>
          </view>

          <view class="btn-group">
            <button class="prev-btn" @click="goToPrevQuestion">上一题</button>
            <button class="submit-btn" @click="submitQuestionnaire" :disabled="answers[9] === null">提交问卷</button>
          </view>
        </view>
      </view>

      <!-- 结果页 -->
      <view class="result-page" v-if="showResult">
        <view v-if="isPerfectScore" class="perfect-result">
          <view class="success-icon">
            <uni-icons type="success" size="60" color="#00B42A"></uni-icons>
          </view>
          <text class="result-title">恭喜您！</text>
          <p class="result-text">您的用气环境符合安全标准，可以预约点火通气。</p>
          <button class="jump-btn" @click="navigateToBooking">前往预约</button>
        </view>

        <view v-else class="imperfect-result">
          <view class="warning-icon">
            <uni-icons type="warn" size="60" color="#FF7D00"></uni-icons>
          </view>
          <text class="result-title">需要整改</text>
          <p class="result-text">您好，根据调查问卷显示，您家中{{ failedItems.length }}项未按照安全通气条件设施，需整改完毕达到通气条件后为您预约点火通气，届时可再次进入小程序完成调查问卷预约点火通气，谢谢。</p>

          <view class="failed-items">
            <text class="failed-title">未通过项目：</text>
            <ul class="failed-list">
              <li v-for="(item, index) in failedItems" :key="index">{{ item }}</li>
            </ul>
          </view>

          <p class="contact-info">依照国家相关规范，您的用气环境无法满足以上情况，须进行整改合格后，再致电我司客服热线电话023-67807333预约开通天然气，我司将在您致电后3个自然日上门开气。</p>

          <button class="restart-btn" @click="restartQuestionnaire">重新答题</button>
        </view>
      </view>
    </view>

    <FooterTel></FooterTel>
  </view>
</template>

<script>
import PageTitle from '../components/pageTitle.vue'
import FooterTel from '../components/footerTel.vue'
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'

export default {
  name: 'gasExam',
  components: {
    PageTitle,
    FooterTel,
    uniIcons
  },
  data() {
    return {
      currentQuestion: 1, // 当前题目编号
      isOpenKitchen: null, // 是否为开放式厨房
      showResult: false, // 是否显示结果页
      isPerfectScore: false, // 是否满分
      failedItems: [], // 未通过的项目

      // 存储答案，true为"是"，false为"否"，null为未回答
      answers: [
        null, // 问题1答案
        null, // 问题2答案
        null, // 问题3答案（正确答案应为否）
        null, // 问题4答案（正确答案应为否）
        null, // 问题5答案
        null, // 问题6答案
        null, // 问题7答案
        null, // 问题8答案
        null, // 问题9答案
        null  // 问题10答案
      ],

      // 问题文本，用于结果页显示未通过项目
      questionTexts: [
        "嵌入式灶灶台下方的橱柜未开设符合要求的通气孔",
        "热水器不符合烟道安装要求",
        "卫生间内安装了燃气管道设施及燃器具",
        "气表及表前的燃气管道设施处于封闭状态或燃气管道穿越洗衣槽、涮洗盆等",
        "燃气灶下未连接不锈钢波纹管或未安装自闭阀",
        "燃气灶具未装有熄火保护装置",
        "立管支架被拆除或破坏",
        "未设置带有自动熄火保护装置的燃气灶具、平衡式热水器",
        "热水器未安装在户外独立空间",
        "未设置可探测甲烷和一氧化碳的复合型燃气泄漏报警器及自动切断阀，或报警器与自动切断阀未处于连锁状态"
      ]
    };
  },
  methods: {
    // 选择答案
    selectAnswer(questionNum, answer) {
      // 关键修复：用this.$set更新数组，触发视图响应
      this.$set(this.answers, questionNum - 1, answer);
      // 验证：此时打印会看到数据变化，且视图会同步更新
      console.log('更新后的数据：', this.answers[questionNum - 1]);
    },

    // 前往下一题
    goToNextQuestion() {
      this.currentQuestion++;
    },

    // 前往上一题
    goToPrevQuestion() {
      if (this.currentQuestion === 8) {
        this.currentQuestion = 7.5;
      } else {
        this.currentQuestion--;
      }
    },

    // 确定下一题（用于第7题后判断是否需要回答开放式厨房问题）
    determineNextQuestion() {
      this.currentQuestion = 7.5;
    },

    // 确认是否为开放式厨房
    confirmOpenKitchen(isOpen) {
      this.isOpenKitchen = isOpen;
      if (isOpen) {
        this.currentQuestion = 8;
      } else {
        this.submitQuestionnaire();
      }
    },

    // 提交问卷
    submitQuestionnaire() {
      // 判断是否所有问题都已回答
      let allAnswered = true;

      // 检查前7题
      for (let i = 0; i < 7; i++) {
        if (this.answers[i] === null) {
          allAnswered = false;
          break;
        }
      }

      // 如果是开放式厨房，检查8-10题
      if (this.isOpenKitchen && allAnswered) {
        for (let i = 7; i < 10; i++) {
          if (this.answers[i] === null) {
            allAnswered = false;
            break;
          }
        }
      }

      if (!allAnswered) {
        uni.showToast({
          title: '请完成所有问题的回答',
          icon: 'none'
        });
        return;
      }

      // 判断是否通过（满分）
      this.checkResults();
      this.showResult = true;
    },

    // 检查结果
    checkResults() {
      this.failedItems = [];

      // 问题1：正确答案为"是"
      if (!this.answers[0]) {
        this.failedItems.push(this.questionTexts[0]);
      }

      // 问题2：正确答案为"是"
      if (!this.answers[1]) {
        this.failedItems.push(this.questionTexts[1]);
      }

      // 问题3：正确答案为"否"（因为问题是"是否安装了..."）
      if (this.answers[2]) {
        this.failedItems.push(this.questionTexts[2]);
      }

      // 问题4：正确答案为"否"（因为问题是"是否处于封闭状态..."）
      if (this.answers[3]) {
        this.failedItems.push(this.questionTexts[3]);
      }

      // 问题5：正确答案为"是"
      if (!this.answers[4]) {
        this.failedItems.push(this.questionTexts[4]);
      }

      // 问题6：正确答案为"是"
      if (!this.answers[5]) {
        this.failedItems.push(this.questionTexts[5]);
      }

      // 问题7：正确答案为"是"
      if (!this.answers[6]) {
        this.failedItems.push(this.questionTexts[6]);
      }

      // 如果是开放式厨房，检查8-10题
      if (this.isOpenKitchen) {
        // 问题8：正确答案为"是"
        if (!this.answers[7]) {
          this.failedItems.push(this.questionTexts[7]);
        }

        // 问题9：正确答案为"是"
        if (!this.answers[8]) {
          this.failedItems.push(this.questionTexts[8]);
        }

        // 问题10：正确答案为"是"
        if (!this.answers[9]) {
          this.failedItems.push(this.questionTexts[9]);
        }
      }

      // 判断是否满分
      this.isPerfectScore = this.failedItems.length === 0;
    },

    // 重新答题
    restartQuestionnaire() {
      this.currentQuestion = 1;
      this.isOpenKitchen = null;
      this.showResult = false;
      this.answers = this.answers.map(() => null);
      this.failedItems = [];
    },

    // 跳转到预约页面
    navigateToBooking() {
      uni.navigateTo({
        url: '/pages/openGasBooking/index'
      });
    }
  }
};
</script>

<style scoped>
.questionnaire-box {
  padding-bottom: 80rpx;
}

.instructions {
  margin-bottom: 30rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}

.questions {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.question-item {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.question-number {
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  float: left;
}

.question-text {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

.example-image {
  margin: 20rpx 0;
}

.example-text {
  color: #999;
  font-size: 26rpx;
  margin-bottom: 10rpx;
}

.example-img {
  width: 100%;
  height: auto;
  border-radius: 5rpx;
  margin-bottom: 20rpx;
}

.options {
  display: flex;
  gap: 40rpx;
  margin: 30rpx 0;
}

.option {
  display: flex;
  align-items: center;
  gap: 10rpx;
  cursor: pointer;
}

::v-deep .radio {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  border: 2rpx solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep .radio.selected {
  border-color: #007aff;
}

::v-deep .radio.selected::after {
  content: "";
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background-color: #007aff;
}

.btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}

.prev-btn, .next-btn, .submit-btn, .skip-btn, .jump-btn, .restart-btn {
  padding: 15rpx 30rpx;
  border-radius: 5rpx;
  font-size: 28rpx;
  border: none;
}

.prev-btn {
  background-color: #f5f5f5;
  color: #666;
}

.next-btn, .submit-btn, .jump-btn {
  background-color: #007aff;
  color: #fff;
}

.skip-btn {
  background-color: #f8f8f8;
  color: #333;
  margin-top: 15rpx;
  width: 100%;
}

.result-page {
  padding: 40rpx 20rpx;
  text-align: center;
}

.success-icon, .warning-icon {
  margin-bottom: 30rpx;
}

.result-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.result-text {
  color: #666;
  line-height: 1.6;
  margin-bottom: 30rpx;
}

.failed-items {
  text-align: left;
  background-color: #fff8e6;
  padding: 20rpx;
  border-radius: 5rpx;
  margin: 20rpx 0;
}

.failed-title {
  font-weight: bold;
  color: #e67700;
  display: block;
  margin-bottom: 10rpx;
}

.failed-list {
  padding-left: 30rpx;
  color: #666;
}

.failed-list li {
  margin-bottom: 10rpx;
  line-height: 1.5;
}

.contact-info {
  color: #999;
  font-size: 26rpx;
  margin: 30rpx 0;
  line-height: 1.6;
}

.restart-btn {
  background-color: #f5f5f5;
  color: #666;
  width: 100%;
  margin-top: 20rpx;
}
</style>